<template>
<el-row class="article-box mv3">
  <el-col :span="4">
    <el-button class="pa0">
      <img :src="item.creator.avatar" class="br1 h3 w3 dib v-mid" alt="avatar">
    </el-button>
  </el-col>
  <el-col :span="20">
    <article-content :item="item"/>
  </el-col>
</el-row>
</template>

<script>
import ArticleContent from '@/components/ArticleCotent';

export default {
  name: 'ArticleItem',
  props: ['item'],
  data() {
    return {};
  },
  components: {
    ArticleContent,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.persion-box {
  margin: 20px auto;
}

.text-over {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.piclen {
  width: 40px;
  height: 20px;
  line-height: 20px;
  background: rgba(0, 0, 0, .7);
  box-shadow: #fff 0 0 2px;
}

.pa0 {
  padding: 0;
}
</style>

